<!-- （张仕琪）店铺页面页面 -->
<template>
  <div class="wrapper">
    <div class="search">
      <div class="search-back iconfont" @click="onClickLeft">&#xe600;</div>
      <div class="search-content">
        <span class="search-content-icon iconfont"> &#xe62e;</span>
        <input type="text" class="search-content-input" placeholder="请输入商品名称" />
      </div>
    </div>
  </div>

  <van-row>
    <van-col :span="7" style="padding: 10px;">
      <van-image width="90px" height="60px" fit="contain" position="center" :src="getHeadImageUrl(store.storeIcon)" />
    </van-col>
    <van-col :span="17">
      <van-row>
        <van-col :span="24" style="padding: 10px 0 0 10px; font-size: large;">
          <span>{{ store.storeName }}</span>
        </van-col>
      </van-row>
      <van-row><van-col :span="24" style="padding: 5px 5px 0 10px; width: 30px;">
          <span>
            {{store.storeIntroduce}}
          </span>
        </van-col></van-row>
      <van-row><van-col :span="24" style="padding: 5px 0 0 10px;">
          <van-tag mark type="primary" @click="(tabActive = 1)">查看详情</van-tag>
        </van-col></van-row>
    </van-col>
  </van-row>

  <van-tabs shrink @change="tabChange" v-model:active="tabActive">
    <van-tab title="点菜">
      <div v-show="(tabActive == 0)" style="display: flex;">
        <van-sidebar v-model="active">
          <van-sidebar-item v-for="item in goodsTypeCla" :key="item.classifyId" :title="item.classifyName"
            @click="goToGoodsTypeList" />
          <!-- <van-sidebar-item title="标称" />
        <van-sidebar-item title="标签名称" /> -->
        </van-sidebar>
        
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getGoodsList">
          <van-card v-for="item in goodsTypeList" :price="item.goodsPrice" :title="item.goodsName"
            :thumb="getHeadImageUrl(item.goodsHeadImage)" style="width: 250px;">
            <template #tags>
              <van-tag plain type="danger" @click="goodsDetail(item)">点我看详情</van-tag>
            </template>
            <template #num>
              <van-button size="mini" @click="btn(false,item)" :disabled="(item.goodsNum <= 0)">-</van-button>
              <!-- <input type="" name="" :value="num" style="text-align: center; border: none;width: 20px;height: 20px;margin-left: 3px;margin-right: 3px;background-color: #f7f8fa;"> -->
              {{item.goodsNum}}
              <van-button size="mini" @click="btn(true,item)" >+</van-button>
              <!-- <van-button size="mini">按钮</van-button> -->
            </template>
            <template #price>
              <span>￥ {{ item.goodsPrice }} </span>
            </template>
          </van-card>
        </van-list>
      </div>
    </van-tab>
    <van-tab title="评论" to="rating/1">
      <!-- <ShopInfo v-show="(tabActive === 1)" :item="store"></ShopInfo> -->
      <Comments ></Comments>
    </van-tab>
  </van-tabs>

  <!-- 底部购物车提交订单 -->
  <div style="margin-top: 50px;">
    <van-submit-bar :price="(totalPrice*100)" button-text="提交订单" @submit="onSubmit" :safe-area-inset-bottom="true">
      <van-checkbox v-model="ischecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
<!-- 菜品详细信息的弹窗显示 -->
  <van-dialog v-model:show="isShowGoodsInfoDialog" title="标题" show-cancel-button>
    <div style="padding: 10px;">
      <van-row>
        <van-col span="24">
          <van-image width="300px" height="150px" fit="contain" position="center"
            :src="getHeadImageUrl(goodsInfo.goodsHeadImage)" />
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          {{ goodsInfo.goodsIntroduce }}
        </van-col>
      </van-row>
      <van-row justify="center">
        <van-col span="12">
          价格：{{goodsInfo.goodsPrice}}元/份
        </van-col>
        <van-col span="12">
          库存：{{goodsInfo.goodsInventory}} 份
        </van-col>
      </van-row>
    </div>
    <template #title>
      {{goodsInfo.goodsName}}
    </template>
    <template #footer>
      <van-row gutter="center">
        <van-col span="24" align="center">
          <van-button color="red"  @click="(isShowGoodsInfoDialog =false)">确定😋看了就想吃它！</van-button>
        </van-col>
      </van-row>
    </template>
  </van-dialog>
</template>

<script setup>
import { onBeforeMount, reactive, ref, defineProps, toRefs } from 'vue';
import { Toast } from 'vant';
import { useRouter } from "vue-router";
import ShopInfo from '../../components/shop/ShopInfo.vue'
import Comments from '../../components/Comments.vue'
import http from '@/utils/request.js'
import { getHeadImageUrl } from '@/utils/api.js'
import { deepCopy } from '@/utils/object.js';
import { Dialog } from 'vant';


const VanDialog = Dialog.Component;
const loading = ref(false);
const finished = ref(true);  //用户下拉时是否需要继续加载
const router = useRouter();
const active = ref(0);
const active_rate = ref(1)
const isShowGoodsInfoDialog = ref(false);
const goodsInfo = reactive({ goodsIntroduce: '', goodsHeadImage: '' })
const show = ref(false);
const onClickLeft = () => history.back();
const num = 0;
const totalPrice=ref(0);
// const props = defineProps({
//   storeid: String
// })
// console.log(props.storeid);
//拿路由传的id
const props = defineProps(['storeid'])
const store = reactive({ storeId: props.storeid, })
console.log(store.storeId);
//获取店铺信息
const getStoreMes = function () {
  http.get(
    '/store/' + store.storeId
  ).then((res) => {
    console.log('获取当前的店铺的信息：', res.data);
    deepCopy(store, res.data.data);
    console.log('获取当前的店铺的信息【store】：', store);
  })
}

// //获取菜品信息
const getGoodsList = function () {
  http.get(
    '/store/goods/' + store.storeId
  ).then((res) => {
    console.log('获取到的菜品列表：', res.data);
    res.data.data.goods.forEach(store => {
      goodsTypeList.push(store);
    });
  })
}


//菜品类别列表（从菜品类别表里，与菜品表里的菜品类别名字一样）
const goodsType = reactive(
  [{ classifyId: 1, classifyName: "小炒" },
  { classifyId: 2, classifyName: "炒面" }]
)

//goods表里的菜品类别
const goodsTypeCla = reactive([]
  // [{ goodsId: 1, goodsClassify: "精美小菜" },
  // { goodsId: 2, goodsClassify: "小炒" }]
)
//查菜品列表里的菜品类别
const getgoodsTypeCla = function () {
  http.get(
    '/store/goods/classify/' + store.storeId
  ).then((res) => {
    console.log('(为了菜品类别)获取到的菜品列表：', res.data);
    res.data.data.forEach(goods => {
      goodsTypeCla.push(goods);
    });
  })
}



//根据类别查出来的菜品列表
const goodsTypeList = reactive([
  // {
  //   goodsId: 1, goodsName: "烤肉拌饭", goodsPrice: 18.00
  // },
  // {
  //   goodsId: 2, goodsName: "鱼香肉丝", goodsPrice: 10.00
  // }
])
// const getgoodsTypeList = function(){
//   http.get(
//     '/store/'
//   )
// }


//当点击路由之后会调转到菜品的位置
function goToGoodsTypeList() {

}

//const data = reactive({item:{}})
//console.log(router.params.storeid);

function goodsDetail(goods) {
  goodsInfo.goodsIntroduce = goods.goodsIntroduce;
  goodsInfo.goodsHeadImage = goods.goodsHeadImage;
  goodsInfo.goodsPrice = goods.goodsPrice;
  goodsInfo.goodsInventory=goods.goodsInventory;
  goodsInfo.goodsName=goods.goodsName;
  isShowGoodsInfoDialog.value = true;
  // const show = ref(true);
  // Dialog.alert({
  //   title: goodsName,
  //   width: 320,
  //   message: goodsIntroduce + '\n价格：' + goodsPrice + '                 如今库存：' + goodsInventory,
  //   confirmButtonText: '确定😋看了就想吃它！',
  //   theme: 'round-button',
  // }).then(() => {
  //   // on close
  // });
}

function storeDetail() {
  Dialog.alert({
    title: store.storeName,
    width: 320,
    message: store.storeIntroduce,
    confirmButtonText: '了解啦~进店逛逛吧>>>>',
    theme: 'round-button',
  }).then(() => {
    // on close
  });
}

const url_rate = () => function toShopBuy() {
  router.push("/");
};

const tabActive = ref(0);
const tabChange = function (a, b, c) {
  console.log('当前tab 已改变: ', a, b, c);
}

//商品数量的增减
function btn(bool,item) {
  //console.log(bool,item.goodsNum);
  if(bool){
    //+
    item.goodsNum++;
    
  }
  else{
    //-
    item.goodsNum--;
  }
  gettotalPrice();
  console.log(bool,item.goodsNum);
}
//总计价格  
function gettotalPrice() {
  let price = 0;
  goodsTypeList.forEach((item)=>{
    price +=item.goodsNum * item.goodsPrice
  })
  totalPrice.value=price;
  console.log(totalPrice.value);
}
//const totalPrice
//提交订单
 
const onSubmit = () =>{
  let cartIdList=[];
  goodsTypeList.forEach(item =>{
    if(item.goodsNum != 0){
       let catarr ={}
       catarr['goodsId'] = item.goodsId
       catarr['goodsNum']=item.goodsNum
       catarr['goodsPrice']=item.goodsPrice
       catarr['storeId'] = item.storeId
       catarr['goodsName'] = item.goodsName
       catarr['goodsHeadImage'] = item.goodsHeadImage
      cartIdList.push(catarr)
    }
  });
  
  localStorage.setItem("cart",JSON.stringify(cartIdList));
  //localStorage.setItem("cart",JSON.stringify(cartIdList));
  //跳转
  router.push('/cartorder/'+store.storeId);
  console.log(cartIdList);
}

//获取商家信息方法
getStoreMes();
getGoodsList();
getgoodsTypeCla();
gettotalPrice();

</script>

<style scoped lang="scss">
@import "../../style/viriables.scss";

.wrapper {
  padding: 0 0.18rem;
}

.search {
  display: flex;
  margin: 0.14rem 0 0.04rem 0;
  line-height: 0.32rem;

  &-back {
    width: 0.3rem;
    font-size: 0.24rem;
    color: $content-fontcolor;
  }

  &-content {
    display: flex;
    flex: 1;
    background: $search-bgColor;
    border-radius: 0.16rem;

    &-icon {
      width: 0.44rem;
      text-align: center;
      color: $search-fontColor;
    }

    &-input {
      display: block;
      width: 100%;
      padding-right: 0.2rem;
      border: none;
      outline: none;
      background: none;
      height: 0.32rem;
      font-size: 0.14rem;
      color: $content-fontcolor;

      &::placeholder {
        color: $search-fontColor;
      }
    }
  }
}
</style>
